*,
*:before,
*:after {
  box-sizing: border-box;
  margin    : 0;
  padding   : 0;
}

$nums      : 8;
$sidePad   : 20px;
$elM       : 0.5%;
$numPerLine: 4;
$elW       : (100% - $elM * $numPerLine * 2) / $numPerLine;


.workList {
  width     : 100%;
  min-height: 20vh;
  max-height: 100vh;
  padding   : $sidePad;

  display  : flex;
  flex-flow: row wrap;

  counter-reset: work;
}
.work {
  width           : $elW;
  height          : 20vh;
  margin          : $elM;
  background-color: rgb(228, 15, 15);
  counter-increment: work;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  @for $i from 0 through $nums {
    &:nth-child(#{$i} + 1) {
      background: rgb(24, 201, 127);
      
    }
  }
  &::after{
    content: counter(work);
    text-align: right;
    position: absolute;
    margin: auto;
    left: 0;
    // right: 0;
    // top: 0;
    // bottom: 0;
    font-size:4em;
    color: hsla(0,100%,100%,.8);
    transform: translate(0,1em);
    will-change: transform;
    transition: transform 0.5s;
  }
  &:hover::after{
    transform: translate(0,0);
  }
}